@background: #edf2ff;
@border: #e9ecef;
@cardBar: #b197fc;
@cardBack: #fff;
@noColor: rgba(0,0,0,0);

.stage-base {

    -fx-font-family:'Source Han Sans CN Normal';
    -fx-background-color: @background;

    .card {

        -fx-background-color: @cardBack;
        -fx-background-radius: 5;
        -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 6, 0.0, 0, 0);

        -fx-border-color: @border;
        -fx-border-width: 1;
        -fx-border-style: solid;
        -fx-border-radius: 5;

        .bar {
            -fx-background-color: @cardBar;
            -fx-background-radius: 0 0 5 5;
            .label {
                -fx-text-fill: @cardBack;
            }
        }
    }

    .tool {

        -fx-background-color: @cardBack;
        -fx-background-radius: 0 0 8 8;
        -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 8, 0.0, 0, 3);

        .text-field {

            -fx-background-color: @noColor;
            -fx-border-color: @cardBar;
            -fx-border-width: 0.5;
            -fx-border-style: solid;
            -fx-border-radius: 99;

        }

        .button {

            -fx-background-color: @noColor;
            -fx-text-fill: @cardBar;

            &:hover {
                 -fx-effect: dropshadow(three-pass-box, @cardBar, 12, 0.0, 0, 0);
            }

        }

    }

    .rec-button {

        -fx-background-color: @cardBack;
        -fx-background-radius: 999;
        -fx-text-fill: @cardBar;
        -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 6, 0.0, 0, 0);

        &:hover {
            -fx-effect: dropshadow(three-pass-box, @cardBar, 12, 0.0, 0, 0);
        }

    }

    .combo-box {
      -fx-background-color: @cardBack;
      -fx-effect: dropshadow(three-pass-box,@cardBar, 6, 0, 0, 0);
      .list-cell {
        -fx-text-fill: @cardBar;
      }
      .arrow {
        -fx-background-color: @cardBar;
      }
      .combo-box-popup {
        .list-view {
          .list-cell {
            -fx-text-fill: @cardBar;
            -fx-background-color: @cardBack;
            &:selected {
              -fx-text-fill: @cardBack;
              -fx-background-color: @cardBar;
            }
            &:hover {
              -fx-text-fill: @cardBack;
              -fx-background-color: @cardBar;
            }
          }
        }
      }
    }

    .prop-sheets {
        -fx-background: @background;
        .button {
            -fx-background-color: @cardBar;
            -fx-text-fill: @cardBack;
            &:hover {
                -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 8, 0.0, 0, 0);
            }
        }
        .text-field {
            -fx-background-color: @cardBack;
            -fx-effect: dropshadow(three-pass-box, @cardBar, 8, 0.0, 0, 0);
        }
    }

    .primary-button {
        -fx-background-color: @cardBar;
        -fx-text-fill: @cardBack;
        &:hover {
            -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 8, 0.0, 0, 0);
        }
    }

    .primary-field {
        -fx-background-color: @cardBack;
        -fx-effect: dropshadow(three-pass-box, @cardBar, 8, 0.0, 0, 0);
    }

    .slider .thumb{
        -fx-background-color:@cardBar;
        -fx-effect:dropshadow(three-pass-box, @cardBar,10,0,0,0);
    }

    .slider .track {
        -fx-background-color:@background;
        -fx-border-radius: 99;
        -fx-border-width: 0.4px;
        -fx-border-color:@cardBar;
    }



}

.files-view {

    -fx-background-color: @background;

    .toolBar {
        -fx-background-color: @cardBack;
        -fx-background-radius: 0 0 8 8;
        -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 8, 0.0, 0, 3);
        .button {

            -fx-background-color: @noColor;
            -fx-text-fill: @cardBar;

            &:hover {
                -fx-effect: dropshadow(three-pass-box, @cardBar, 12, 0.0, 0, 0);
            }

        }
    }

    .gridView {

        .grid-cell {
            -fx-border-radius: 8;
            -fx-border-style: dashed;
            -fx-border-width: 1;
            -fx-border-color: @background;
            .icon {
                 -fx-text-fill: @cardBar;
                 -fx-effect: dropshadow(three-pass-box, @cardBar, 12, 0.0, 0, 0);
            }
            &:hover {
                -fx-border-color: @cardBar;
            }
            .selected {
                -fx-background-radius: 8;
                -fx-background-color: @cardBack;
                -fx-text-fill: @cardBar;
                -fx-effect: dropshadow(three-pass-box, @cardBar, 12, 0.0, 0, 0);
            }
        }

    }
}